<template>
<section style="font-size: .24rem;padding-bottom: 30px;">
  <img src="../../assets/carlist/header.png" class="header">
   <div class="pt_fa">
     <div class="part" @click="driverCard($event)">
       <div class="part_t">
         <div>
           <p class="tit">行驶证信息查询</p>
           <p class="con">车牌号+车牌类型</p>
         </div>
         <img src="../../assets/carlist/driverCard.png" class="img">
       </div>
       <div class="part_f">
         <span>￥{{price1}}</span>
         <span @click="example1($event)">查看报告示例</span>
       </div>
     </div>

     <div class="part" @click="carLaw()">
       <div class="part_t">
         <div>
           <p class="tit">车辆违章查询</p>
           <p class="con">车牌号+车牌类型+车架号+发动机号</p>
         </div>
         <img src="../../assets/carlist/carLaw.png" class="img">
       </div>
       <div class="part_f">
         <span>￥{{price3}}</span>
         <span @click="example3($event)">查看报告示例</span>
       </div>
     </div>
   </div>
  <div class="pt_fa">
    <div class="part" @click="carVin()">
      <div class="part_t">
        <div>
          <p class="tit">车辆VIN解析</p>
          <p class="con">车架号</p>
        </div>
        <img src="../../assets/carlist/carVin.png" class="img">
      </div>
      <div class="part_f">
        <span>￥{{price8}}</span>
        <span @click="example8($event)">查看报告示例</span>
      </div>
    </div>
    <div class="part" @click="carDanger()">
      <div class="part_t">
        <div>
          <p class="tit">车辆出险查询</p>
          <p class="con">车牌号或车架号</p>
        </div>
        <img src="../../assets/carlist/carDanger.png" class="img">
      </div>
      <div class="part_f">
        <span>￥{{price5}}</span>
        <span @click="example5($event)">查看报告示例</span>
      </div>
    </div>

  </div>
  <div class="pt_fa">
    <div class="part" @click="licenseSearch()">
      <div class="part_t">
        <div>
          <p class="tit">驾驶证信息查询</p>
          <p class="con">身份证号</p>
        </div>
        <img src="../../assets/carlist/licenseSearch.png" class="img">
      </div>
      <div class="part_f">
        <span>￥{{price7}}</span>
        <span @click="example7($event)">查看报告示例</span>
      </div>
    </div>
    <!--<div class="part" @click="carInfo()">-->
      <!--<div class="part_t">-->
        <!--<div>-->
          <!--<p class="tit">车辆基本信息</p>-->
          <!--<p class="con">车牌号</p>-->
        <!--</div>-->
        <!--<img src="../../assets/carlist/carInfo.png" class="img">-->
      <!--</div>-->
      <!--<div class="part_f">-->
        <!--<span>￥{{price2}}</span>-->
        <!--<span @click="example2($event)">查看报告示例</span>-->
      <!--</div>-->
    <!--</div>-->
    <div class="part" @click="carPolicy()">
      <div class="part_t">
        <div>
          <p class="tit">车辆保单信息</p>
          <p class="con">保险公司+保单号+车牌号+证件号</p>
        </div>
        <img src="../../assets/carlist/carPolicy.png" class="img">
      </div>
      <div class="part_f">
        <span>￥{{price4}}</span>
        <span @click="example4($event)">查看报告示例</span>
      </div>
    </div>
  </div>
  <!--<div class="pt_fa">-->
    <!--<div class="part" @click="carChoose()">-->
      <!--<div class="part_t">-->
        <!--<div>-->
          <!--<p class="tit">车辆选配信息</p>-->
          <!--<p class="con">车架号</p>-->
        <!--</div>-->
        <!--<img src="../../assets/carlist/carChoose.png" class="img">-->
      <!--</div>-->
      <!--<div class="part_f">-->
        <!--<span>￥{{price6}}</span>-->
        <!--<span @click="example6($event)">查看报告示例</span>-->
      <!--</div>-->
    <!--</div>-->


  <!--</div>-->
</section>
</template>

<script>
    import wx from 'weixin-js-sdk';
    export default {
        name: "carList",
        data(){
          return{
            price1:'',
            price2:'',
            price3:'',
            price4:'',
            price5:'',
            price6:'',
            price7:'',
            price8:'',
            num:'1',
          }
        },
      methods:{
        driverCard(){
          this.$router.push('/driver_card');
        },
        carInfo(){
          this.$router.push('/car_info');
        },
        carLaw(){
          this.$router.push('/car_law');
        },
        carPolicy(){
          this.$router.push('/car_policy');
        },
        carDanger(){
          this.$router.push('/car_danger');
        },
        carChoose(){
          this.$router.push('/car_choose');
        },
        licenseSearch(){
          this.$router.push('/license_search');
        },
        carVin(){
          this.$router.push('/car_vin');
        },
        example1($event){
          $event.stopPropagation();
          this.num = '1';
          this.$router.push({
            path:'/car_example',
            query:{
              name:'1',
            }
          })
        },
        example2($event){
          $event.stopPropagation();
          this.num = '2';
          this.$router.push({
            path:'/car_example',
            query:{
              name:'2',
            }
          })
        },
        example3($event){
          $event.stopPropagation();
          this.num = '3';
          this.$router.push({
            path:'/car_example',
            query:{
              name:'3',
            }
          })
        },
        example4($event){
          $event.stopPropagation();
          this.num = '4';
          this.$router.push({
            path:'/car_example',
            query:{
              name:'4',
            }
          })
        },
        example5($event){
          $event.stopPropagation();
          this.num = '5';
          this.$router.push({
            path:'/car_example',
            query:{
              name:'5',
            }
          })
        },
        example6($event){
          $event.stopPropagation();
          this.num = '6';
          this.$router.push({
            path:'/car_example',
            query:{
              name:'6',
            }
          })
        },
        example7($event){
          $event.stopPropagation();
          this.num = '7';
          this.$router.push({
            path:'/car_example',
            query:{
              name:'7',
            }
          })
        },
        example8($event){
          $event.stopPropagation();
          this.num = '8';
          this.$router.push({
            path:'/car_example',
            query:{
              name:'8',
            }
          })
        },
      },
      created(){
        this.$ajax.post(window.g.apiUrl+'/alipay/getProduct.do', JSON.stringify({
          type: 'B',
        })).then((response) => {
          if (response.data.code == 200) {
            let arr = response.data.data;
            for (let [index, val] of arr.entries()) {
              if (val.id == '33') {
                this.price1 = val.price;
              }
              if (val.id == '25') {
                this.price2 = val.price;
              }
              if (val.id == '26') {
                this.price3 = val.price;
              }
              if (val.id == '29') {
                this.price4 = val.price;
              }
              if (val.id == '32') {
                this.price5 = val.price;
              }
              if (val.id == '37') {
                this.price6 = val.price;
              }
              if (val.id == '38') {
                this.price7 = val.price;
              }
              if (val.id == '36') {
                this.price8 = val.price;
              }
            }
          } else {
            this.$dialog.notify({
              mes: '信息获取超时，请稍后重试',
              timeout: 1500,
            });
          }
        }).catch(() => {
        })
        let url = location.href.split('#')[0];
        let shareUrl = location.href;
        this.$ajax.post(window.g.apiUrl+'/user/signature.do', JSON.stringify({
          url: url,
        })).then((response) => {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: response.data.data.appId, // 必填，公众号的唯一标识
            timestamp: response.data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: response.data.data.nonceStr, // 必填，生成签名的随机串
            signature: response.data.data.signature,// 必填，签名
            jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
          });
          wx.ready(function () {
            wx.onMenuShareTimeline({
              title: '火炬数据 车辆查询', // 分享标题
              link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.huojudata.com/image/logo.jpg', // 分享图标
              success: function () {
                // 用户点击了分享后执行的回调函数
              },
            })
            wx.onMenuShareAppMessage({
              title: '火炬数据 车辆查询', // 分享标题
              desc: '【火炬数据】让数据聚合价值    用科技成就未来', // 分享描述
              link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.huojudata.com/image/logo.jpg', // 分享图标
              type: '', // 分享类型,music、video或link，不填默认为link
              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: function () {
// 用户点击了分享后执行的回调函数
              }
            });
          });
        }).catch(() => {
        })

      },
      beforeRouteLeave(to,from,next){
        if(to.path == '/car_example'){
          console.log(this.num);
          switch (this.num){
            case '1':
              to.meta.title = '行驶证信息查询样例';
              break;
            case '2':
              to.meta.title = '车辆基本信息样例';
              break;
            case '3':
              to.meta.title = '车辆违章查询样例';
              break;
            case '4':
              to.meta.title = '车辆保单信息样例';
              break;
            case '5':
              to.meta.title = '车辆出险查询样例';
              break;
            case '6':
              to.meta.title = '车辆选配信息样例';
              break;
            case '7':
              to.meta.title = '驾驶证信息查询样例';
              break;
            case '8':
              to.meta.title = '车辆VIN解析样例';
              break;
          }
          next();
        }else{
          next();
        }
      }
    }
</script>

<style scoped>
.header{
  width: 100%;
  display: block;
}
.pt_fa{
  display: flex;
  margin: .3rem 0;
  align-items: center;
  justify-content: space-around;
}
  .part{
    width: 3.5rem;
    height: 2.2rem;
    box-shadow: 1px 1px 5px 1px rgba(199, 199, 199, .8);
    border-radius: 5px;
    padding: .15rem;
    position: relative;
  }
  .part_t{
    display: flex;
    border-bottom:1px solid #f2f2f2;
    height: 1.4rem;
  }
  .img{
    width: .8rem;
    position: absolute;
    right: .1rem;
  }
  .part_f{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: .7rem;
  }
  .part_f span:nth-child(1){
    color: red;
    font-size: .3rem;
    font-weight: bold;
  }
  .part_f span:nth-child(2){
    color: #62B5F9;
    text-decoration: underline;
  }
  .con{
    color: #808080;
    text-align: left;
    width: 2.2rem;
    margin-top: .1rem;
  }
  .tit{
    font-size: .28rem;
    text-align: left;
  }
</style>
